<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <!-- 右侧属性面板，根据id进行获取 -->
    <div id="js-properties-panel" class="panel"></div>
    <ul class="buttons">
      <li>
        <a ref="saveDiagram" href="javascript:" title="保存为bpmn"
          >保存为bpmn</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
import { initModeler } from "./initModeler"; //初始化Modeler
import { addBpmnListener } from "./listeners/bpmnListener"; //bpmn画布整个监听
import { addModelerListener } from "./listeners/modelerListener"; //modeler事件监听
import { addEventBusListener } from "./listeners/elementListener"; //element事件监听
import { xmlStr } from "../demofile/demo";
import { onServerPrefetch } from "vue";
export default {
  name: "",
  components: {},
  created() {},
  mounted() {
    this.init();
  },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null,
      initXml: xmlStr
    };
  },
  methods: {
    // 初始化画布，找到ref为canvas的DOM节点
    init() {
      // 在DOM元素进行更新的时候执行nextTick函数
      this.$nextTick(() => {
        //初始化modeler
        this.initModeler();
      });
    },
    //初始化modeler
    initModeler() {
      const canvas = this.$refs.canvas;
      this.bpmnModeler = initModeler(canvas);
      this.createNewDiagram();
    },
    async createNewDiagram() {
      let that = this;
      let bpmnStr = this.initXml;

      this.bpmnModeler.importXML(xmlStr, err => {
        if (err) {
          console.log(err);
        } else {
          this.success();
        }
      });
    },
    tranfromCanvas(xmlStr) {
      this.bpmnModeler.importXML(xmlStr, err => {
        if (err) {
          console.log(err);
        } else {
          this.success();
        }
      });
    },
    success() {
      console.log("xml导入成功");
      this.addBpmnListener();
      //引入modelerListener
      addModelerListener(this.bpmnModeler);
      // 引入elementListener
      addEventBusListener(this.bpmnModeler);
    },
    addBpmnListener() {
      const that = this;
      const downloadLink = this.$refs.saveDiagram;
      that.bpmnModeler.on("commandStack.changed", function() {
        that.saveDiagram(function(err, xml) {
          that.setEncoded(downloadLink, "bpmnFile.bpmn", err ? null : xml);
        });
      });
    },

    saveDiagram(done) {
      this.bpmnModeler.saveXML({ format: true }, function(err, xml) {
        done(err, xml);
      });
    },
    setEncoded(link, name, data) {
      // 把xml转换为URI，下载要用到的
      const encodedData = encodeURIComponent(data);
      // 下载图的具体操作,改变a的属性，className令a标签可点击，href令能下载，download是下载的文件的名字
      // console.log(link, name, data);
      // let xmlFile = new File([data], "test.bpmn");
      // console.log(xmlFile);
      if (data) {
        link.className = "active";
        link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
        link.download = name;
      }
    }
  }
};
</script>

<style scoped>
.containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.buttons {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.buttons li {
  display: inline-block;
  margin: 5px;
}
.buttons li a {
  color: #999;
  background: #eee;
  cursor: not-allowed;
  padding: 8px;
  border: 1px solid #ccc;
  text-decoration: none;
}
.buttons li a.active {
  color: #333;
  background: #fff;
  cursor: pointer;
}
</style>
